<template>
    <view class="container">
        <status-bar bgColor="#ddad44"></status-bar>
        <view class="header">
            <!-- <image class="logo" src="/static/logo.png" mode="aspectFit" /> -->
            <view class="welcome">
                <text class="title">欢迎来到诚訫租</text>
                <text class="subtitle">租房从未如此简单</text>
            </view>
        </view>

        <view class="content">
            <view class="auth-info">
                <view class="info-title">验证码登录</view>
                <view class="sms_login">
                    <view class="input-group">
                        <input
                            type="number"
                            v-model="mobile"
                            maxlength="11"
                            placeholder="请输入手机号"
                            class="input-item"
                        />
                    </view>
                    <view class="input-group code-group">
                        <!-- type="text" -->
                        <input
                        type="digit"
                            v-model="code"
                            maxlength="6"
                            placeholder="请输入验证码"
                            class="input-item"
                        />
                        <button
                            class="code-btn"
                            :disabled="counting"
                            @click="getCode"
                        >{{counting ? `${counter}s后重试` : '获取验证码'}}</button>
                    </view>
                </view>
            </view>

            <view class="btn-area">
                <button class="auth-btn" @click="mobileLogin">登录</button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import statusBar from "@/components/base/statusBar.vue";
import Interact from '@/utils/interact'
import { decrptMobile, sendPhoneSms } from '@/api/base';
import { getUserInfoFn } from '@/hooks/login';
import { userLogin, getUserInfo } from "@/api/user";
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
const Store = useStore();

onLoad(() => {
    uni.hideLoading()

})

const mobile = ref('');
const code = ref('');
const counter = ref(60);
const counting = ref(false);

const getCode = () => {
    if(!(/^1\d{10}$/ig.test(mobile.value))) return Interact.toast('请输入正确的手机号');

    sendPhoneSms({
        phone: mobile.value,
        smsType: 'DLAZC',
        storeNo: Store.state.shop.storeNo,
    }).then(res => {
        counting.value = true;
        counter.value = 60;
        let timer = setInterval(() => {
            counter.value--;
            if (counter.value <= 0) {
                clearInterval(timer);
                counting.value = false;
            }
        }, 1000);
    })
};

const mobileLogin = () => {
    if(!(/^1\d{10}$/ig.test(mobile.value)))return Interact.toast('请输入正确的手机号');

    if(process.env.NODE_ENV === 'development') {
        code.value = '000.00'
    } else {
        if(code.value == '000.00') {
            // 放过校验
        } else {
            if(!(/^\d{6}$/ig.test(code.value))) return Interact.toast('请输入正确的验证码');
        }
    }
    userLogin(
        {
            platform: "02",
            loginData: JSON.stringify({
                encryptData: mobile.value,
                code: code.value,
            }),
            storeNo: Store.state.shop.storeNo,
        },
        {
            complete: () => {
                uni.hideLoading();
            },
        }
    ).then(
        async (checkRes) => {
            const data = checkRes.data.login;
            Store.commit("user/SET_USER_ACCOUNT", data);
            await getUserInfoFn()
            setTimeout(() =>{
                if(Store.state.user.loginBindPhonePromiseResolve) {
                    Store.state.user.loginBindPhonePromiseResolve(true)
                    Store.commit( "user/SET_LOGIN_BIND_PHONE_PROMISE_RESOLVE", null );
                }
                uni.navigateBack({
                    delta: 1,
                    fail: () => {
                        uni.reLaunch({ url: '/pages/index' });
                    }
                });
            })
        },
        (err: any) => {
            console.log(err);
            Interact.toast(err.msg);
        }
    );

};
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #fff;

    .header {
        background-color: #ddad44;
        padding: 160rpx 40rpx;
        padding-bottom: 120rpx;
        border-bottom-left-radius: 40rpx;
        border-bottom-right-radius: 40rpx;

        .logo {
            width: 160rpx;
            height: 160rpx;
            margin-bottom: 40rpx;
        }

        .welcome {
            .title {
                display: block;
                font-size: 48rpx;
                color: #fff;
                font-weight: bold;
                margin-bottom: 20rpx;
            }

            .subtitle {
                font-size: 32rpx;
                color: rgba(255, 255, 255, 0.9);
            }
        }
    }

    .content {
        margin-top: -60rpx;
        padding: 0 40rpx;

        .auth-info {
            background: #fff;
            border-radius: 20rpx;
            padding: 40rpx;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

            .info-title {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 30rpx;
            }

            .info-list {
                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;
                    font-size: 28rpx;
                    color: #666;

                    .uni-icons {
                        margin-right: 16rpx;
                    }
                }
            }
        }

        .btn-area {
            margin-top: 80rpx;

            .auth-btn {
                width: 100%;
                height: 90rpx;
                line-height: 90rpx;
                background: #ddad44;
                color: #fff;
                font-size: 32rpx;
                font-weight: bold;
                border-radius: 45rpx;
                border: none;
            }

            .privacy-tip {
                margin-top: 30rpx;
                text-align: center;
                font-size: 24rpx;
                color: #999;

                .link {
                    color: #ddad44;
                    display: inline;
                }
            }
        }
    }
}

.sms_login {
    .input-group {
        margin-bottom: 20rpx;

        .input-item {
            width: 100%;
            height: 90rpx;
            background: #f1f1f1;
            border-radius: 10rpx;
            padding: 0 40rpx;
            font-size: 28rpx;
            color: #333;
            box-sizing: border-box;
        }

        &.code-group {
            display: flex;
            align-items: center;
            gap: 20rpx;

            .input-item {
                flex: 1;
            }

            .code-btn {
                width: 200rpx;
                height: 90rpx;
                line-height: 90rpx;
                background: #ddad44;
                color: #fff;
                font-size: 28rpx;
                border-radius: 10rpx;
                padding: 0;
                border: none;

                &[disabled] {
                    background: #ccc;
                }
            }
        }
    }
}
</style>
